
<style lang="scss" scoped>
    @import "./../../css/music";
</style>
<template>
    <div class="page-content">
        <div>
          <div class="scroll-content">
            <my-scorll :onloadMore="onloadMore" :onScroll = "onScroll" :scroll="scroll" :onrefresh="onrefresh">
              <div class="banner-wrap" id="banner-wrap">
                <ul  class="banner-content swiper-wrapper">
                  <li v-for="(item,index) in banners" :key="index" class="swiper-slide">
                      <img-component :url="item.pic"></img-component>
                  </li>
                </ul>
                <ul class="swiper-pagination"></ul>
              </div>
              <div class="push-content">
                <div class="push-title">
                  <h2>推荐歌单</h2>
                </div>
                <ul class="push-list">
                  <li v-for="(item,index) in orderLists" :key="index" :style="index%3 == '1' ? 'margin: 0 0.525rem;':''">
                    <router-link :to='"/play/"+item.id' tag="div" >
                      <div class="music-con">
                        <img-component :url="item.coverImgUrl"></img-component>
                        <span class="listen-number">{{item.subscribedCount}}</span>
                      </div>
                      <div class="music-text">
                        {{item.name}}
                      </div>
                    </router-link>
                  </li>
                </ul>
              </div>
            </my-scorll>
          </div>
        </div>
    </div>
</template>
<script>
import store from './../../store/index' ;
import { mapState } from 'vuex' ;
import Swiper from 'swiper' ;
import imgComponent from "./../../components/img";
import myScorll from "./../../components/scorll";
import routerLink from './../../components/routerLink'
export default {
  data(){
        return {
            data:"音乐",
            refresh:false
        }
  },
  computed:mapState({
      banners:state => state.common.banners ,
      orderLists: state => state.common.orderLists 
  }),
  mounted(){
    this.initSwiper()
    this.getBanner() ;
    this.getOrder() ;
  },
  components:{
    imgComponent,
    myScorll ,
    routerLink
  },
  methods:{
      getBanner:function (){
        this.$store.dispatch(('getBanner')).then(
          () => {
              
          }
        );
      },
      scroll(scroll){
        console.log(scroll)
      },
      getOrder:function() {
        this.$store.dispatch(('getOrder')).then(() => {
              
          });
        
      },
      initSwiper:function(){
        var mySwiper = new Swiper('.banner-wrap', {
          autoplay: 5000,
          pagination : '.swiper-pagination',
          paginationType : 'bullets',
          paginationElement : 'li',
          paginationClickable :true,
          zoom : true,
          zoomMax :5,
          loop:true
        })
      },
      onloadMore(){
          this.getBanner()
      },
      onScroll(scroll,direction){
        // console.log(scroll)
      },
      onrefresh(){
        
      }
  }
}
</script>